<template>
    <div class="loading-shadow" v-show="loading">
        <div class="loading">
            <div class="load-item lt"></div>
            <div class="load-item lb"></div>
            <div class="load-item rt"></div>
            <div class="load-item rb"></div>
        </div>
    </div>
</template>

<script setup>
import { loading } from '@/service/status';
</script>

<style scoped lang="less">
// 定义旋转动画关键帧
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-shadow {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    background-color: #88888880;

    .loading {
        --size: 6vw;
        width: var(--size);
        height: var(--size);
        position: relative;
        animation: rotate 1s linear infinite;

        .load-item {
            --size: 2.5vw;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background-color: var(--active-color);
            position: absolute;

            &.lt {
                top: 0;
                left: 0;
                opacity: 0.9;
            }

            &.lb {
                left: 0;
                bottom: 0;
                opacity: 0.7;
            }
            
            &.rt {
                top: 0;
                right: 0;
                opacity: 0.5;
            }

            &.rb {
                right: 0;
                bottom: 0;
                opacity: 0.3;
            }
        }
    }
}
</style>